<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px">
			<el-form ref="itemSetDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
				<table class="qgg-table">
					<thead>
						<tr>
							<th v-for="(header, index) in skuHeader" :key="index">{{ header }}</th>
							<th>零售价格(元)</th>
							<th>商品原价(元)</th>
							<th>库存(个)</th>
							<th>活动库存</th>
							<th>活动价格</th>
							<th v-if="leaderDiscountFlag == 1">团长价格</th>
							<th>设置</th>
						</tr>
					</thead>
					<tbody>
						<tr></tr>
						<tr v-for="(item, index) in state.ruleForm.goodsSkus" :key="index">
							<td v-for="(v, index) in item.specification" :key="index">
								{{ v.value }}
							</td>
							<td>
								{{ item.price }}
							</td>
							<td>
								{{ item.originalPrice }}
							</td>
							<td>
								{{ item.stock }}
							</td>

							<td>
								<el-form-item
									size="small"
									style="margin-bottom: 0px"
									label-width="0px"
									:rules="{ required: true, message: '活动库存不能为空', trigger: 'blue' }"
									:prop="'goodsSkus.' + index + '.activityStock'"
								>
									<el-input-number v-model="item.activityStock" :min="1" controls-position="right" size="small" :disabled="item.enable == 0" />
								</el-form-item>
							</td>
							<td>
								<el-form-item
									size="small"
									style="margin-bottom: 0px"
									label-width="0px"
									:rules="{ required: true, message: '活动价格不能为空', trigger: 'blue' }"
									:prop="'goodsSkus.' + index + '.activityPrice'"
								>
									<el-input-number
										v-model="item.activityPrice"
										:min="0.1"
										:precision="2"
										controls-position="right"
										size="small"
										:disabled="item.enable == 0"
									/>
								</el-form-item>
							</td>
							<td v-if="leaderDiscountFlag == 1">
								<el-form-item
									size="small"
									style="margin-bottom: 0px"
									label-width="0px"
									:rules="{ required: true, message: '活动团长价格不能为空', trigger: 'blue' }"
									:prop="'goodsSkus.' + index + '.leaderPrice'"
								>
									<el-input-number
										v-model="item.leaderPrice"
										:min="0.1"
										:precision="2"
										controls-position="right"
										size="small"
										:disabled="item.enable == 0"
									/>
								</el-form-item>
							</td>
							<td>
								<el-button text type="primary" v-if="item.enable == 0" @click="item.enable = 1">参与</el-button>
								<el-button v-else text type="primary" @click="item.enable = 0">取消</el-button>
							</td>
						</tr>
					</tbody>
				</table>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onConfirm(itemSetDialogFormRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { goodsApi } from '/@/api/goods/index';
import { type FormInstance, type FormRules } from 'element-plus';
import _ from 'lodash';

//  todo 这里实现有问题，
const itemSetDialogFormRef = ref();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '商品设置',
		submitTxt: '确认',
	},
	item: {} as any,
	ruleForm: {
		specs: [] as any[],
		goodsSkus: [] as any[],
	},
});

const skuHeader = ref<string[]>([]);
const goodsSkus = ref<any[]>([]);
let leaderDiscountFlag = 0;

const openDialog = async (itemObj: any, leaderDiscount: any) => {
	console.log('itemObj.itemProps: ', itemObj);
	leaderDiscountFlag = leaderDiscount;
	state.dialog.isShowDialog = true;
	state.item = itemObj;
	if (_.isEmpty(itemObj.itemProps)) {
		console.log('属性为空');
		const { data } = await goodsApi().view(itemObj.goodsId);
		if (data.spec == 1) {
			console.log('多规格.....：  data：   ', data);
			resolveMangSpecContent(data.goodsAttrs, data.goodsSkus);
		} else {
			console.log('单规格.....');
			// 单规格
			resolveSingleSpecContent(data);
		}
		itemObj.itemProps = state.ruleForm.goodsSkus;
	} else {
		console.log('属性有值: ', itemObj);
		// 编辑修改
		resolveEditContent(itemObj.itemProps);
		itemObj.itemProps = state.ruleForm.goodsSkus;
	}
};

const onConfirm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			state.dialog.isShowDialog = false;
		}
	});
};

const resolveEditContent = (props: any) => {
	console.log('props: ', props);
	clearSkuSpec();
	if (!_.isEmpty(props[0].specification)) {
		props[0].specification.forEach((e: any) => {
			skuHeader.value.push(e.key);
		});
	}
	props.forEach((e: any) => {
		let gs: any = {
			picUrl: e.picUrl,
			showPicUrl: e.showPicUrl,
			specification: [],
			price: e.price,
			originalPrice: e.originalPrice,
			stock: e.stock,
			activityPrice: e.activityPrice,
			activityStock: e.activityStock,
			leaderPrice: e.leaderPrice,
			enable: e.enable,
		};
		e.specification.forEach((element: any) => {
			gs.specification.push({
				key: element.key,
				value: element.value,
			});
		});
		goodsSkus.value.push(gs);
		state.ruleForm.goodsSkus.push(gs);
	});
};
const resolveSingleSpecContent = (e: any) => {
	clearSkuSpec();
	state.ruleForm.goodsSkus.push({
		picUrl: e.picUrl,
		showPicUrl: e.showPicUrl,
		specification: [],
		price: e.price,
		originalPrice: e.originalPrice,
		stock: e.stock,
		activityPrice: 0,
		leaderPrice: 0,
		activityStock: 0,
		enable: 0,
	});
};
const resolveMangSpecContent = (goodsAttrs: any, goodsSkusParam: any) => {
	console.log('goodsAttrs: ', goodsAttrs);
	console.log('goodsSkusParam: ', goodsSkusParam);
	clearSkuSpec();
	goodsAttrs.forEach((e: any) => {
		let si: any = {
			key: Date.now(),
			value: e.attribute,
			specContents: [],
		};
		e.value.forEach((element: string) => {
			si.specContents.push({
				key: Date.now(),
				value: element,
			});
		});

		state.ruleForm.specs.push(si);
	});

	goodsSkusParam[0].specification.forEach((v: any) => {
		skuHeader.value.push(v.key);
	});

	goodsSkusParam.forEach((e: any) => {
		let gs: any = {
			picUrl: e.picUrl,
			showPicUrl: e.showPicUrl,
			specification: [],
			price: e.price,
			originalPrice: e.originalPrice,
			stock: e.stock,
			activityPrice: 0,
			leaderPrice: 0,
			activityStock: 0,
			enable: 0,
		};
		e.specification.forEach((element: any) => {
			gs.specification.push({
				key: element.key,
				value: element.value,
			});
		});
		goodsSkus.value.push(gs);
		state.ruleForm.goodsSkus.push(gs);
	});
};

const clearSkuSpec = () => {
	console.log('清空数据....');
	goodsSkus.value = [];
	state.ruleForm.goodsSkus = [];
	skuHeader.value = [];
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.qgg-table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #c6c6c6 !important;
	margin-bottom: 20px;
	border-spacing: 0;
	table-layout: fixed;
}

.qgg-table th {
	border-collapse: collapse;
	border-right: 1px solid #c6c6c6 !important;
	border-bottom: 1px solid #c6c6c6 !important;
	background-color: #ddeeff !important;
	padding: 5px 9px;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
}

.qgg-table td {
	border-collapse: collapse;
	border-right: 1px solid #c6c6c6 !important;
	border-bottom: 1px solid #c6c6c6 !important;
	padding: 5px 9px;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	word-break: break-all;
}

.qgg-table tr:nth-child(odd) {
	background-color: #fff !important;
}

.qgg-table tr:nth-child(even) {
	background-color: #f8f8f8 !important;
}

.center {
	display: flex;
	justify-content: center;
}
</style>
